<template>
    <el-card style="width: 100%;" class="rounded-lg">
        <template #header>
            <div class="flex justify-between items-center" >
                <span>{{title}}</span>
                <el-tag type="danger">{{tip}}</el-tag>
            </div>
        </template>
        <el-row :gutter="20">
            <el-col :span="6" v-for="(item, index) in data" :key="index">
                <el-card shadow="hover" class="rounded-lg cursor-pointer">
                    <div class="flex flex-col justify-center items-center">
                        <span class="mt-2 text-xl font-bold">{{item.value}}</span>
                        <span class="mt-2 text-sm text-gray-500">{{item.label}}</span>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </el-card>
</template>
<script setup>
const props = defineProps({
    title: String,
    tip: String,
    data: Array
})
</script>
<style>

</style>